<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>扫雷</title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		table {
			margin: 20px auto;
		}
		td {
			width: 40px;
			height: 40px;
			background-image: url(img/type0.svg);
			background-size: 100%;
		}
		.level{
			font-size: 20px;
			color: blue;
			text-align: center;
			margin-top: 20px;
		}
		.level b{
			padding: 0 20px;
		}
	</style>
	<body>
		<div id='app'>
			<p class="level">
				<b v-for='(item,index) in level' @click="current=index,init()">{{item.name}}</b>
				<br>
				<span>雷：{{count}}</span>
			</p>
			<p align=center>
				{{m<10?'0'+m:m}}:{{s<10?'0'+s:s}}
			</p>
			<table cellspacing=0>
				<tr v-for='row in list'>
					<td v-for='col in row'>
						<div v-if='col.closed' @click.right.prevent="point(col)" @click="open(col)">
							<img v-if="!col.flag" width="100%" src="img/closed.svg" alt="">
							<img v-else width="100%" src="img/flag.svg" alt="">
						</div>
						<div v-else style="height: 40px;" @click="openSafe(col)">
							<img width="100%" v-if='col.content==-1' src="img/mine.svg" alt="">
							<img width="100%" v-else :src="'img/type'+col.content+'.svg'" alt="">
						</div>
					</td>
				</tr>
			</table>
		</div>
		<script src="js/saolei.js"></script>
	</body>
</html>